<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Module Logic</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css">
</head>
<body>

  <div>
    <form action="" style="margin: 3% auto; max-width: 400px" role="form">

      <h3>data-validation-depends-on</h3>

      <div class="form-group">
        <label class="control-label">
          Contact me &nbsp;
          <input name="do-contact" type="checkbox" value="1" />
        </label>
      </div>

      <div class="form-group">
        <label class="control-label">E-mail</label>
        <input class="form-control"
               type="text"
               data-validation="email"
               data-validation-depends-on="do-contact"
              />
      </div>


      <div class="form-group">
        <label class="control-label">Country</label>
        <input class="form-control"
               type="text"
               name="country"
               data-validation="country"
               data-validation-error-msg="You have to answer with a country"
               autocomplete="off"
              />
      </div>

      <div class="form-group">
        <label class="control-label">State</label>
        <input class="form-control"
               type="text"
               name="state"
               data-validation="required"
               data-validation-depends-on="country"
               data-validation-depends-on-value="usa, canada"
              />
      </div>

      <div class="form-group">
        <button type="submit">Login</button>
      </div>

    </form>
  </div>

  <hr>

  <div>
    <form action="" style="margin: 3% auto; max-width: 400px" role="form">

      <h3>data-validation-if-answered</h3>


      <div class="form-group">
        <label class="control-label">
          Home Phone Number &nbsp;
        </label>
        <input name="homephone" class="form-control"
               data-validation="number"
               data-validation-optional-if-answered="cellphone, workphone"
            />
      </div>

      <div class="form-group">
        <label class="control-label">
          Work Phone Number &nbsp;
        </label>
        <input name="workphone" class="form-control"
               data-validation="number"
               data-validation-optional-if-answered="cellphone, homephone"
            />
      </div>

      <div class="form-group">
        <label class="control-label">
          Cell Phone Number &nbsp;
        </label>
        <input name="cellphone" class="form-control"
               data-validation="number"
               data-validation-optional-if-answered="workphone, homephone"
            />
      </div>

      <div class="form-group">
        <button type="submit">Login</button>
      </div>

    </form>
  </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="../form-validator/jquery.form-validator.js"></script>
  <script>

    $.validate({
      modules: 'logic, location',
      onSuccess: function() {
        alert('valid');
        return false;
      },
      onModulesLoaded: function() {
        $('input[name="country"]').suggestCountry();
      }
    });

  </script>

</body>
</html>
